<!--用户订单-->
<template>
  <div class="user_order_box">
    <div class="order_menu">
      <div
        :class="activeIndex === 1 ? 'menu_item_active' : ''"
        class="menu_item"
        @click="handleSelect(1)"
      >
        未支付订单
      </div>
      <div
        :class="activeIndex === 2 ? 'menu_item_active' : ''"
        class="menu_item"
        @click="handleSelect(2)"
      >
        已支付订单
      </div>
    </div>
    <div>
      <order-table :orderType="activeIndex" :tableDate="showList"></order-table>
    </div>
  </div>
</template>
<script>
import orderTable from "./orderTable";

export default {
  data() {
    return {
      activeIndex: 1, // 已支付未支付切换变量
      // 未支付
      unpaid: [
        {
          createTime: "2021-04-16 16:35:38", // 创建时间
          username: "测试员1", // 用户名

          paymentType: "待支付", // 支付类型
          transaction: {
            // 交易金额（元）/数量
            money: 32,
            quantity: 2,
            productName: "哇哈哈哈哈哈哈",
            orderNumber: "2021041616353820210416163", // 订单号
          },
          pledge: {
            // 抵押总金额（元）/数量
            money: 0,
            quantity: 0,
          },
          amount: "32", // 商品金额
          remark: "-----", // 备注
          status: "待支付", // 状态
        },
      ],
      // 已支付
      paid: [
        {
          createTime: "2021-04-16 16:35:38", // 创建时间
          username: "测试员2", // 用户名

          paymentType: "已支付", // 支付类型
          transaction: {
            // 交易金额（元）/数量
            money: 32,
            quantity: 2,
            productName: "哇哈哈哈哈哈哈",
            orderNumber: "20211234566353820210416163", // 订单号
          },
          pledge: {
            // 抵押总金额（元）/数量
            money: 0,
            quantity: 0,
          },
          amount: "32", // 商品金额
          remark: "-----", // 备注
          status: "已支付", // 状态
        },
      ],
      // 表格显示数据
      showList: "",
    };
  },
  components: { orderTable },
  created() {
    this.showList = this.unpaid;
  },
  methods: {
    handleSelect(key) {
      if (key === 1) {
        this.activeIndex = 1;
        this.showList = this.unpaid;
      } else {
        this.activeIndex = 2;
        this.showList = this.paid;
      }
    },
  },
};
</script>
<style scoped>
.user_order_box {
  background-color: #ffffff;
}

.el-menu-item.is-active {
  background-color: #4973ff !important;
  border-bottom-color: #4973ff !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: 2px solid #4973ff !important;
}

.el-menu-item:hover {
  background-color: rgba(181, 243, 255, 0.67) !important;
}

.order_menu {
  display: flex;
  height: 50px;
  align-items: center;
  border-bottom: 2px solid #4973ff;
}

.menu_item {
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #000000;
  font-size: 16px;
  border-bottom: 1px solid #4973ff;
  background-color: #ffffff;
  cursor: pointer;
}

.menu_item_active {
  color: #ffffff;
  background-color: #4973ff;
}
</style>
